<template>
  <div class="line-container">
    <div class="title">
      <p>未来7天游客数量趋势图</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import * as echarts from 'echarts'

  const charts = ref<HTMLDivElement | null>(null)
  onMounted(() => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
      title: {
        text: '未来7天游客数量趋势图',
        textStyle: {
          color: '#fff',
        },
        left: '45%',
      },
      xAxis: {
        type: 'category',
        // 坐标轴两边留白策略
        boundaryGap: false,
        splitLine: {
          show: false,
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        // 坐标轴在 grid 区域中的分隔线。
        splitLine: {
          show: false,
        },
        // 坐标轴轴线
        axisLine: {
          show: true,
        },
        // 坐标轴刻度相关设置。
        axisTick: {
          show: true,
        },
      },
      series: [
        {
          type: 'line',
          data: [10, 20, 34, 213, 1234, 343, 456],
          // 平滑曲线
          smooth: true,
          // 分隔区域的样式设置
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'red', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'blue', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 20,
      },
    })
  })
</script>

<style lang="scss" scoped>
  .line-container {
    width: 100%;
    height: 100%;
    background-image: url(../../images/dataScreen-main-cb.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0px 20px;
    .title {
      p {
        color: #fff;
        font-size: 20px;
      }
    }
    .charts {
      height: calc(100% - 40px);
    }
  }
</style>
